<script lang="ts" setup>
import {onMounted, onUnmounted, reactive, ref} from "vue";
import {LoginBo} from "@/dto/Login/Login.ts";
import {LoginApi} from "@/api/login/LoginApi.ts";
import {useUserStore} from "@/store/admin/User/UserStore.ts";
import {UserVo} from "@/dto/User/User.ts";
import router from "@/config/router.ts";
import {ElMessage, FormInstance, FormRules} from "element-plus";
import axiosRequest from "@/config/axios.ts";

const loginBo = ref<LoginBo>(new LoginBo())
const loginApi = ref<LoginApi>(new LoginApi())
const {
    setUser,
    getUser
} = useUserStore()

async function login() {
    if (!loginBo.value.account){
        ElMessage.error("请填写账号")
    }
    if (!loginBo.value.password){
        ElMessage.error("请填写密码")
    }
    let result = await loginApi.value.webLogin(loginBo.value)
    if (result.code == 200) {
        setUser(result.data?.userVo ?? new UserVo())
        localStorage.setItem("user",String(getUser().id))
        localStorage.setItem("token",result.data?.token ?? "")
        await router.push({path: "/admin/home/home"})
        ElMessage.success("登录成功")
    }
}

function keydown(e){
    if (e.keyCode == 13){
        login()
    }
}

onMounted(()=>{
    window.addEventListener("keydown",keydown)
    localStorage.removeItem("user")
    localStorage.removeItem("token")
})

onUnmounted(()=>{
    window.removeEventListener("keydown",keydown,false)
})
</script>

<template>
    <div class="main">
        <el-row style="margin-top: 150px">
            <el-col :span="12" :offset="6">
                <el-card style="--el-card-padding: 0;height: 600px;border:0">
                    <el-row>
                        <el-col :span="12">
                            <div class="image no-cursor"></div>
                        </el-col>
                        <el-col :offset="1" :span="10">
                            <div class="no-cursor" style="height: 200px;width: 100%;">
                                <el-image class="logo"/>
                            </div>
                            <h1 class="no-cursor">账号密码登录</h1>
                            <el-form :model="loginBo">
                                <el-form-item>
                                    <el-input v-model="loginBo.account" class="input" placeholder="请输入账号"/>
                                </el-form-item>
                                <el-form-item>
                                    <el-input type="password" v-model="loginBo.password" class="input" placeholder="请输入密码"/>
                                </el-form-item>
                            </el-form>
                            <el-button style="width: 100%; height: 40px;" type="primary" @click="login" @keyup.enter="login">登录</el-button>
                        </el-col>
                    </el-row>
                </el-card>

            </el-col>
        </el-row>
    </div>

</template>

<style scoped>
.main {
    background: #1e4c9a;
}

.input {
    height: 60px;
}

.image {
    background-image: url('@/assets/image/R.png');
    background-size: 500px;
    height: 600px;
    margin: 0;
    padding: 0;
}

.logo {
    width: 100px;
    height: 100px;
    margin-top: 50px;
    margin-left: 150px;
}
</style>